---
id: 615f3b091162165948e1cb33
title: Schritt 11
challengeType: 0
dashedName: step-11
---

# --description--

Wenn du dein `.label`-Element mit den Entwickler-Tools deines Browers überprüfst, kannst du feststellen, dass es eigentlich 288 Pixel statt 270 Pixel breit ist. Dies liegt daran, dass der Browser standardmäßig den Rand und das Padding enthält, wenn die Größe eines Elements festgelegt wird.

Um dies zu beheben, setze das Box-Modell zurück, indem du einen `*`-Selektor erstellst und ihm eine `box-sizing`-Eigenschaft von `border-box` zuweist.

# --hints--

Du solltest einen `*`-Selektor erstellen.

```js
assert(new __helpers.CSSHelp(document).getStyle('*'));
```

Dein `*`-Selektor sollte eine `box-sizing`-Eigenschaft auf `border-box` gesetzt haben.

```js
assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
  <link href="./styles.css" rel="stylesheet">
</head>

<body>
  <div class="label">
    <h1>Nutrition Facts</h1>
    <p>8 servings per container</p>
    <p>Serving size 2/3 cup (55g)</p>
  </div>
</body>
</html>
```

```css
--fcc-editable-region--

--fcc-editable-region--

html {
  font-size: 16px;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.label {
  border: 2px solid black;
  width: 270px;
  margin: 20px auto;
  padding: 0 7px;
}
```
